<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>el与data的两种写法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>你好，{{name}}</h1>
            <hr>
            data与el的2种写法
            <p>
                1.el的2种写法<br>
                (1) new Vue时候配置el属性。<br>
                (2) 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值<br>
                
            </p>
            <p>
                2.data的2种写法<br>
                (1) 对象式。<br>
                (2) 函数式。<br>
                
                如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
            </p>
            <p>
                3.一个重要的原则：
                由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
            </p>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // el的两种写法
            /*
            const v = new Vue({
                // el: '#root', // 第1种写法
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    name: 'Vue'
                }
            })
            // v.$mount('#root')    // 第2种写法

            // 1秒钟之后再关联vue实例和容器
            setTimeout(() => {
                v.$mount('#root')
            }, 1000);
            */

            // data的两种写法
            const v = new Vue({
                el: '#root', // 第1种写法
                // data的第一种写法：对象式
                /*data: {
                    name: 'Vue'
                }*/

                // data的第二种写法：函数式
                data:function(){
                    console.log('@@@', this)    // 此处的this是Vue实例对象
                    return {
                        name: 'vue'
                    }
                }
            })

        </script>
    </body>
</html>
